<template>
  <div>
    <van-nav-bar
      title="搜索详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- {{ this.$route.params.keyword }} -->
    电影编号{{ this.$route.params.movie_id }}
    <br />
    <div class="movie_box">
      <div>
        <img :src="this.movie.movie_image" alt="" height="200" />
      </div>
      <div>
        <label for="">片名:{{ this.movie.movie_name }}</label
        ><br />
        <label for="">年份:{{ this.movie.product_year }}</label
        ><br />
        <label for="">导演:{{ this.movie.director }}</label
        ><br />
        <label for="">主创:{{ this.movie.acts }}</label
        ><br />
        <label for="">简介:{{ this.movie.synopsis }}</label
        ><br />
      </div>
    </div>
    <van-button round type="info" @click="writeComment">写影评</van-button>
    <div v-for="item in comments" :key="item" class="commentModule">
      <div class="box">
        <van-row type="flex" justify="center">
          <van-col span="6">{{ item.user_id }}</van-col>
          <van-col span="8">{{
            $moment(parseInt(item.create_time)).format("YYYY-MM-DD HH:mm")
          }}</van-col>
          <van-col span="4"
            >&nbsp;<van-button
              icon="plus"
              type="primary"
              size="small"
              text="收藏"
              color="#7232dd"
              plain
              @click="toCollect(item.id)"
            ></van-button
          ></van-col>
        </van-row>
        <van-divider />
        <label for="">{{ item.content }}</label>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "querystring";
import { Search, Toast } from "vant";
export default {
  data() {
    return {
      //获取传递的参数
      searchword: this.$route.params.keyword,
      movie_id: this.$route.params.movie_id,
      movie: {
        moviename: "",
        product_year: "",
        director: "",
        acts: "",
        synopsis: "",
        movie_image: "",
        country: "",
        movie_id: "",
      },
      comments: [],
    };
  },
  created() {
    this.loadMsg();
    // this.loadComment();
  },
  methods: {
    //加载搜索详细信息
    async loadMsg() {
      await axios
        .post(
          `http://localhost:8888/movie/info`,
          qs.stringify({ keyword: this.searchword, movie_id: this.movie_id })
        )
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            // alert("res.status")
            if (res.data.length) {
              // alert('res.data.status')
              this.movie.moviename = res.data[0].movie_name;
              this.movie.product_year = res.data[0].product_year;
              this.movie.director = res.data[0].director;
              this.movie.acts = res.data[0].acts;
              this.movie.synopsis = res.data[0].synopsis;
              this.movie.movie_image = res.data[0].movie_image;
              this.movie.country = res.data[0].country;
              this.movie.movie_id = res.data[0].movie_id;
            } else if (res.data.status == 300) {
              // alert('no res.data.status')
              Toast.fail("此电影暂时搜不到哦");
            }
          } else {
            Toast.fail("服务器出错");
          }
        });
      await axios
        .get(
          `http://localhost:8888/movie/comment/findAll?movie_id=${this.movie.movie_id}`
        )
        .then((res) => {
          this.comments = res.data;
        });
    },
    onClickLeft() {
      // sessionStorage.removeItem('movie_id')
      // sessionStorage.removeItem('searchWord')
      // this.$router.go(-1);
      this.$router.push({ path: "/" });
    },
    writeComment() {
      this.$router.push({
        name: "writeMovieComment",
        params: { movie_id: this.movie.movie_id },
      });
    },
    toCollect(id) {
      axios
        .get(
          `http://localhost:8888/favorites/toAddOne?username=${sessionStorage.getItem(
            "username"
          )}&movieComment=${id}`
        )
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            Toast("收藏成功");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
/deep/ .van-card__thumb img {
  border-radius: 0px;
  // width: 100%;
  height: 100%;
}
.movie_box {
  background-color: #fff;
  font-size: 12px;
  margin: 10px;
  line-height: 2em;
}
.box {
  width: 90%;
  padding: 10px;
  text-align: left;
  font-size: 13px;
  line-height: 2em;
}
// .commentModule{
//   // border:1px solid #333;
// }
</style>
